<template>
  <div class="resizable-data-table">
    <!-- 表格工具栏 -->
    <div v-if="showToolbar" class="table-toolbar">
      <div class="toolbar-left">
        <slot name="toolbar-left" />
      </div>
      <div class="toolbar-right">
        <n-button
          size="small"
          quaternary
          @click="resetColumnWidths"
          :title="'重置列宽'"
        >
          <template #icon>
            <n-icon><Icons name="refresh-outline" /></n-icon>
          </template>
          重置列宽
        </n-button>
        <slot name="toolbar-right" />
      </div>
    </div>
    
    <!-- 数据表格 -->
    <n-data-table
      v-bind="$attrs"
      :columns="resizableColumns"
      :class="{ 'resizing': isResizing }"
    />
  </div>
</template>

<script setup lang="ts">
import { computed, defineProps, defineEmits } from 'vue'
import { NDataTable, NButton, NIcon } from 'naive-ui'
import { useResizableColumns, type ResizableColumn } from '@/composables/useResizableColumns'
import Icons from './Icons.vue'

export interface ResizableDataTableProps {
  columns: ResizableColumn[]
  tableKey: string
  defaultWidths?: Record<string, number>
  showToolbar?: boolean
}

const props = withDefaults(defineProps<ResizableDataTableProps>(), {
  showToolbar: true
})

// 使用可调整列宽的Hook
const { resizableColumns, resetColumnWidths, isResizing } = useResizableColumns({
  columns: props.columns,
  tableKey: props.tableKey,
  defaultWidths: props.defaultWidths
})
</script>

<style scoped>
.resizable-data-table {
  width: 100%;
}

.table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding: 8px 0;
}

.toolbar-left,
.toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.toolbar-right {
  flex-shrink: 0;
}

/* 调整中的视觉效果 */
.resizable-data-table :deep(.n-data-table.resizing) {
  user-select: none;
}

.resizable-data-table :deep(.n-data-table.resizing *) {
  cursor: col-resize !important;
}
</style>